<!--楼宇设备-->
<template>
  <div class="main">
    <basic-layout title="办公物资物资登记" :showAddBtn="false" :showFilterBtn="true"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <div>
        <van-row class="listCard">
          <van-pull-refresh v-if="dataList.length" class="cardVanPullRefresh1" v-model="refreshing"
                            @refresh="onRefresh">
            <van-list v-if="dataList.length > 0" v-model="loading" :finished="finished" finished-text="已经到底啦!"
                      @load="nextPage">
              <div v-for="(item,i) in dataList" :key="i" class="dataStyle">
                <div >
                  <div class="hengXian" @click="editHandle(item.id)">
                    <div class="dataBStyle">
                      <div class="dataBBStyle">
                        <p class="dataBBTextStyle">
                          <span class="label">&nbsp;&nbsp;&nbsp;{{ item.pinm }}</span>

                        </p>
                        <div class="aImgStyle1">
                          <span v-if="item.shiftq == '01'" style="color:green;">已贴签</span>
                          <span v-if="item.shiftq == '02' || item.shiftq == '' || item.shiftq == null " style="color: red">未贴签</span>
                        </div>
                      </div>
                    </div>
                    <div class="mainStyle">
                      <div class="dataAStyle">
                        <div class="dataAAStyle">
                          <span v-if="!item.swid">无</span>
                          <span v-else class="label1"></span>&nbsp;&nbsp;&nbsp;{{ item.swid }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="dataStyleMing">
                      <div class="dataBStyle dataTopStyle" @click="editHandle(item.id)">
                        <div class="dataB1Style">
                          <span class="label" style="color: #aaa;">&nbsp;&nbsp;&nbsp;设备类别：</span>
                          {{ item.dal }}/{{ item.xiaol }}
                        </div>
                        <div class="dataB1Style">
                          <span class="xingH" style="color: #aaa;">&nbsp;&nbsp;&nbsp;型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                          {{ item.xingh }}
                        </div>
                        <div class="dataBStyle dataTopStyle">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="label " style="color: #aaa;">&nbsp;&nbsp;&nbsp;房产名称：</span>
                            {{ item.fangcname }}
                          </div>
                        </div>
                        <div class="dataB1Style">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="label" style="color: #aaa;margin-left: 12px;">楼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;层：</span>
                            <span
                              v-if="item.loucname" type="primary">
                            {{ item.loucname }}
                          </span>
                            <span>楼</span>
                            <span
                              v-if="item.fangjname">
                            {{ item.fangjname }}
                          </span>
                          </div>
                        </div>
                        <div class="dataB1Style">
                          <div class="an-ellipsis dataBBTextStyle">
                            <span class="label" style="color: #aaa;">&nbsp;&nbsp;&nbsp;保管人：</span>
                            <span v-if="item.baogr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.baogr }}</span>
                            <span
                              v-else>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          </div>
                        </div>
                      </div>
                      <div class="bImgStyle">
                        <div class="btn" v-if="item.shiftq == '01'">
                          <van-button color="#f25454" plain @click="delHandle(item)">取消赋码</van-button>
                        </div>
                        <div class="btn1" v-if="item.shiftq == '02' || item.shiftq == '' || item.shiftq == null ">
                          <van-button color="green" plain @click="tieqHandle(item,i)">扫码赋码</van-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-row>
      </div>
    </basic-layout>

    <!--          打开右侧搜索栏-->
    <queryPopup ref="queryPopupRef" @handleSearch="defineSearch" @handleReset="handleReset">
      <van-form class="filterBox">
        <label>大类：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showDialogHandle(1)">
              <span v-if="!canteenData" style="color: #aaa">请选择</span>
              <span v-else>{{ canteenData }}</span>
            </div>
          </template>
        </van-field>
        <label>小类：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showDialogHandle(2)">
              <span v-if="!SubclassData" style="color: #aaa">请选择</span>
              <span v-else>{{ SubclassData }}</span>
            </div>
          </template>
        </van-field>
        <label>楼宇：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showDialogHandle(3)">
              <span v-if="!buildingData" style="color: #aaa">请选择</span>
              <span v-else>{{ buildingData }}</span>
            </div>
          </template>
        </van-field>
        <label>楼层：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showDialogHandle(4)">
              <span v-if="!chooseLcData" style="color: #aaa">请选择</span>
              <span v-else>{{ chooseLcData }}</span>
            </div>
          </template>
        </van-field>
        <label>房间：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showDialogHandle(5)">
              <span v-if="!chooseFjData" style="color: #aaa">请选择</span>
              <span v-else>{{ chooseFjData }}</span>
            </div>
          </template>
        </van-field>
        <div class="typeStyle">
          <label>筛选状态：</label>
          <van-cell-group>
            <van-field name="checkboxGroup" label="" class="checkstyle">
              <template #input>
                <van-checkbox-group
                  v-model="status"
                  class="vanCheckboxGroupStyle"
                >
                  <van-checkbox shape="square" name="1" class="buttonStyle">
                    <template #icon="props">
                      <van-button v-if="props.checked" class="vanButtonStyleA">
                        <span>未贴签</span>
                      </van-button>
                      <van-button
                        v-else
                        color="#0ca8ad4f"
                        class="vanButtonStyle"
                      >
                        <span>未贴签</span>
                      </van-button>
                    </template>
                  </van-checkbox>
                  <van-checkbox shape="square" name="2" class="buttonStyle">
                    <template #icon="props">
                      <van-button v-if="props.checked" class="vanButtonStyleA">
                        <span>已贴签</span>
                      </van-button>
                      <van-button
                        v-else
                        color="#0ca8ad4f"
                        class="vanButtonStyle"
                      >
                        <span>已贴签</span>
                      </van-button>
                    </template>
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </van-form>
    </queryPopup>
    <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="data.defaultData.dlDataList"
                      @select="onConfirm"/>
    <van-action-sheet v-model="smallPicker" cancel-text="取消" :actions="XLItem" @select="SubclassOnConfirm"/>
    <van-action-sheet v-model="showLyPicker" cancel-text="取消" :actions="data.defaultData.lyDataList"
                      @select="buildingOnConfirm"/>
    <van-action-sheet v-model="showLcPicker" cancel-text="取消" :actions="FcItem"
                      @select="builLcOnConfirm"/>
    <van-action-sheet v-model="showFjPicker" cancel-text="取消" :actions="FjItem"
                      @select="builFjOnConfirm"/>

    <fullscreenModal :modal="fullscreenDetailModal" label="办公物资物"
                     defaultBgColor="#eee"
                     :isShowEdit="true" editType="detail"
                     @handleEdit="handleEdit(Xqid)"
                     @handleClose="fullscreenDetailModal = false"
                     @handleCancel="editType = 'detail'">
      <officeMaterialRegisterDetail @close="fullscreenDetailModal = false" ref="detailFormRef1" @refresh="onRefresh"/>
    </fullscreenModal>
  </div>


</template>
<script>
import $ from 'jquery'
import {
  getLbByType,
  getLouyByUser,
  queryShebListByParams,
  quxtq,
  getLoucByLouy,
  getFangjByLouc,
  updateBarcodeByDeviceId,
} from '@/api/srvAssurance/assetLabel/assetLabel'
import officeMaterialRegisterDetail from './officeMaterialRegisterDetail.vue'

export default {

  name: 'officeMaterialRegister',

  // setup () {
  //   const searchVal = ref('')s
  //   return { searchVal }
  // },
  components: { officeMaterialRegisterDetail },
  data () {
    return {
      data: {
        defaultData: {
          dlDataList: [], //大类数据
          xlDataList: [], //小类数据
          lyDataList: [], //楼宇数据
          lcDataList: [], //楼层数据
          fjDataList: [], //房间数据
        },
        filterData: {
          dlDataList: [], //大类数据
          xlDataList: [], //小类数据
          lyDataList: [], //楼宇数据
          lcDataList: [], //楼层数据
          fjDataList: [], //房间数据
        },
      },
      canteenData: '',
      chooseXlData: '',
      SubclassData: '',
      buildingData: '',
      chooseLyData: '',
      chooseLcData: '',
      chooseFjData: '',
      Xqid: '',
      dataList: [],
      dialogData: [],
      dialogDataBack: [],
      fullscreenDetailModal: false,
      loading: false,
      finished: false,
      refreshing: false,
      show: false,
      showLyPicker: false,
      showLcPicker: false,
      showFjPicker: false,
      showDialog: false,
      handlerModal: false,
      showPicker: false,
      smallPicker: false,
      dialogTitle: '',

      flag: null,
      formData: {
        dlVal: null,
        xlVal: null,
        lyVal: null,
        lcVal: null,
        fjVal: null,
        status: null,
      },
      searchVal: null,

      queryParam: {
        dal: '',
        xiaol: '',
        louyid: '',
        loucid: '',
        fangjid: '',
        isyswid: '',
        pageIndex: 1,
        pageSize: 10,
        type: '04',
      },
      XLItem: [],
      FcItem: [],
      FjItem: [],
      status: ['1', '2'],
    }
  },

  created () {
    this.initLbType()
    this.initLyData()
    this.searchHandle()
  },

  methods: {
    searchHandle () {
      this.initData()
      this.show = false
    },
    defineSearch () {
      this.$refs.queryPopupRef.show = false
      this.onRefresh()
    },
    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (
        this.dataList.length <
        this.queryParam.pageIndex * this.queryParam.pageSize
      ) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      if (this.status.length == 2) {
        this.queryParam.isyswid = ''
      } else {
        this.queryParam.isyswid = this.status[0]
      }
      let res = await queryShebListByParams(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    // 重置查询条件
    handleReset () {
      this.queryParam = {
        dal: '',
        xiaol: '',
        louyid: '',
        loucid: '',
        fangjid: '',
        isyswid: '',
        pageIndex: 1,
        pageSize: 10,
        type: '04',
      }
      this.canteenData = '请选择'
      this.chooseXlData = '请选择'
      this.chooseLyData = '请选择'
      this.chooseLcData = '请选择'
      this.chooseFjData = '请选择'
      this.SubclassData = '请选择'
      this.buildingData = '请选择'
      this.status = ['1', '2']
      this.getDataList()
    },

    async initLbType () {
      let lbDatas = await getLbByType({ type: '1' })
      if (lbDatas.status == 0) {
        var dataList = lbDatas.data
        dataList.forEach((item) => {
          if (item.parentCode == '') {
            this.data.defaultData.dlDataList.push(item)
          } else {
            this.data.defaultData.xlDataList.push(item)
          }
        })
      }
    },

    async initLyData () {
      let louYuDatas = await getLouyByUser({
        corpid: sessionStorage.getItem('corpId'),
      })
      if (louYuDatas.status == 0) {
        var dataList = louYuDatas.data
        dataList.forEach((item) => {
          item.name = item.fangcname
          this.data.defaultData.lyDataList.push(item)
        })
      }
    },
    onConfirm (val) {
      this.canteenData = val.name
      this.queryParam.dal = val.code
      this.canteenCode = val.code
      this.showPicker = false
    },
    SubclassOnConfirm (val) {
      this.SubclassData = val.name
      this.queryParam.xiaol = val.code
      this.smallPicker = false
      this.XLItem = []
    },
    buildingOnConfirm (val) {
      this.buildingData = val.name
      this.queryParam.louyid = val.fangcid
      this.showLyPicker = false
    },
    builLcOnConfirm (val) {
      this.chooseLcData = val.name
      this.queryParam.loucid = val.loucid
      this.showLcPicker = false
      this.FcItem = []
    },
    builFjOnConfirm (val) {
      this.chooseFjData = val.name
      this.queryParam.fangjid = val.fangjid
      this.showFjPicker = false
      this.FjItem = []
    },
    chooseHandle (item) {
      this.showDialog = false
      if (this.flag === 1) {
        this.chooseDlData = item.name
        this.queryParam.dal = item.code
      } else if (this.flag === 2) {
        this.chooseXlData = item.name
        this.queryParam.xiaol = item.code
      } else if (this.flag === 3) {
        this.chooseLyData = item.name
        this.queryParam.louyid = item.fangcid
      } else if (this.flag === 4) {
        this.chooseLcData = item.name
        this.queryParam.loucid = item.loucid
      } else if (this.flag === 5) {
        this.chooseFjData = item.name
        this.queryParam.fangjid = item.fangjid
      }
    },

    async showDialogHandle (val) {
      if (val === 1) {
        this.showPicker = true
      } else if (val === 2) {
        if (this.queryParam.dal == '') {
          this.$toast('请先选择大类')
          return
        }
        this.XLItem = []
        // // 处理小类数据
        let code = this.canteenCode
        this.data.defaultData.xlDataList.forEach((item) => {
          if (item.parentCode == code) {
            this.XLItem.push(item)
          }
        })
        this.smallPicker = true
      } else if (val === 3) {
        this.showLyPicker = true
      } else if (val === 4) {
        if (this.queryParam.louyid == '') {
          this.$toast('请先选择楼宇信息')
          return
        }
        let lcData = await getLoucByLouy({
          louyid: this.queryParam.louyid,
        })
        this.FcItem = []
        if (lcData.status == 0) {
          lcData.data.forEach((item) => {
            var data = {}
            data.loucid = item.loucid
            data.name = item.loucname
            this.FcItem.push(data)
          })
        }
        this.showLcPicker = true
      } else if (val === 5) {
        if (this.queryParam.louyid == '') {
          this.$toast('请先选择楼宇信息')
          return
        } else if (this.queryParam.loucid == '') {
          this.$toast('请先选择楼层信息')
          return
        } else {
          let fjData = await getFangjByLouc({
            loucid: this.queryParam.loucid,
          })
          this.FjItem = []
          if (fjData.status == 0) {
            fjData.data.forEach((item) => {
              var data = {}
              data.fangjid = item.fangjid
              data.name = item.fangjname
              this.FjItem.push(data)
            })
          }
          this.showFjPicker = true
        }
      }
      this.showDialog = true
      this.flag = val
    },

    onUpdate (value) {
      value = value.trim()
      this.dialogDataBack = []
      let dialogData = []
      if (this.flag === 1) {
        dialogData = this.data.defaultData.dlDataList
      } else if (this.flag === 2) {
        dialogData = this.data.defaultData.xlDataList
      } else if (this.flag === 3) {
        dialogData = this.data.defaultData.lyDataList
      } else if (this.flag === 4) {
        dialogData = this.data.defaultData.lcDataList
      } else if (this.flag === 5) {
        dialogData = this.data.defaultData.fjDataList
      }
      if (value == null || value.trim() == '') {
        this.dialogDataBack = [...dialogData]
        return
      }
      if (value) {
        dialogData.forEach((i) => {
          let val = { ...i }
          //判断遍历是否包含输入字符
          if (val.name.indexOf(value) != -1) {
            var newHtml = `<span style="color: red">${value}</span>`
            //实现高亮效果
            this.dialogDataBack.push(val)
            //替换高亮字段
            this.dialogDataBack.forEach((item) => {
              item.value = item.name
              item.value = item.value.replace(value, newHtml)
            })
          }
        })
      }
    },

    async delHandle (item) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定需要清除[' + item.fangcname + ']的实物ID吗？',
        })
        .then(async () => {
          let queryParam = {}
          queryParam.swid = item.swid
          queryParam.shebid = item.id
          let res = await quxtq(queryParam)
          if (res.status === 0) {
            this.$toast(res.message)
            this.initData()
          }
        })
        .catch(() => {
        })
    },
    handleEdit (pamae) {
      this.fullscreenDetailModal=true
      this.$router.push({
        path: '/asset/officeMaterialRegisterEdit?id=' + pamae,
        query: {
          id: pamae,
          fullscreenModal: false,
        },
      })
    },
    editHandle (param) {
      this.Xqid=param;
      this.fullscreenDetailModal = true;
      this.editType = "detail";
      this.isAdd = false;
      this.$refs.detailFormRef1.getSearch(param);
    },
    tieqHandle (item, i) {
      let div = document.getElementsByClassName('dataStyle')[i]
      $('.dataStyle').removeClass('moth')
      $(div).addClass('moth')
      let _this = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: async function (res) {
          if (res.resultStr) {
            let queryParam = {}
            queryParam.shebid = item.id
            queryParam.swid = res.resultStr
            queryParam.type = '04'
            let resData = await updateBarcodeByDeviceId(queryParam)
            if (resData.status == 0) {
              _this.initData()
            }
            $(div).removeClass('moth')
          }
        },
        error: function (res) {
          $(div).removeClass('moth')
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        },
      })
    },
  },
}
</script>

<style scoped lang="less">
.main{
  height: 100%;
  background-color: #8080803b;
  .filterBox {
    .checkstyle {
      width: 100%;

      .vanCheckboxGroupStyle {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;

        .buttonStyle {
          .vanButtonStyle {
            background-color: #0ca8ad4f;
            border-radius: 5px;
            height: 35px;

            span {
              color: gray;
            }
          }

          .vanButtonStyleA {
            border-radius: 5px;
            border: 1px solid gray !important;
            height: 35px;

            span {
              color: gray;
            }
          }
        }
      }

      /deep/ .van-checkbox__icon {
        height: 100%;
      }

      /deep/ .van-cell__value {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .van-field__body {
          width: 100%;
        }
      }
    }
  }

  .mainUpStyle {
    height: 80px;
    background: -webkit-gradient(linear,
    0% 0%,
    100% 0%,
    from(rgb(14 150 216)),
    to(rgba(14, 150, 216, 0.53)));

    .upStyle {
      float: left;
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: center;
      align-items: center;

      .textStyle {
        color: #ffff;
        font-size: 20px;
        font-weight: 500;
      }
    }

    .upStyleBm {
      margin-left: 20px;
      color: #ffffff;
    }
  }

  .listCard {


    .cardVanPullRefresh1 {
      min-height: 100%;

      .dataStyle {
        height: 5.1rem;
        margin:10px;
        background-color: #ffffff;
        border-radius: 3px;

        .dataStyleMing {
          position: relative;

          .bImgStyle {
            position: absolute;
            right: 15px;
            top: 86px;

            .btn {
              right: 10px;
              bottom: 25px;

              .van-button {
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border-radius: 17px;
                font-size: 13px;
              }
            }

            .btn1 {
              right: 10px;
              bottom: 25px;

              .van-button {
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border-radius: 17px;
                font-size: 13px;
              }
            }
          }

          .dataB1Style {
            margin-top: 7px;
            margin-bottom: 7px;
          }
        }

        .hengXian {
          box-sizing: border-box;
          height: 1.46667rem;
          border-bottom: 1px solid #eee;

        }

        .mainStyle {
          display: flex;
          flex-direction: column;

          .dataAStyle {
            width: 100%;
            height: 0.5167rem;
            display: -webkit-inline-box;
            vertical-align: middle;
            font-size: 0.3rem;

            .dataAAStyle {
              .label {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 20px;
                height: 0.4667rem;
                margin-top: 1px;
                position: absolute;
                z-index: 9999;
                color: rgb(51, 51, 51);
              }

              .label1 {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 20px;
                height: 0.4667rem;
                margin-top: 1px;
                position: absolute;
                z-index: 9999;
                color: rgb(51, 51, 51);
              }

              color: #aaaaaa;
              border-top-right-radius: 10px;
              border-bottom-right-radius: 10px;
              height: 35px;
              line-height: 0.56667rem;
              margin: auto;
              width: 98%;

              span {
                margin-left: 13px;
              }
            }
          }
        }

        position: relative;

        .dataBBStyle {
          .aImgStyle1 {
            position: absolute;
            top: 13px;
            right: 33px;
            margin-left: 78%;
          }

          .dataBBTextStyle {
            font-size: 15px;
            position: relative;
            height: 33px;
            top: 10px;
            font-weight: bold;
            //width: 60%;

            b span {
              font-size: 14px;
            }

          }

          .aImgStyle {
            background: #f2a84e;
            font-size: 9px;
            color: #fff;
            margin-left: 8px;
            padding: 2px 3px;
            border-radius: 3px;
          }
        }

        .upMainStyle {
          height: 85%;

          .textMainStyle {
            width: 70%;
            height: 100%;
            float: left;

            .dataAStyle {
              width: 100%;
              height: 40px;
              display: -webkit-inline-box;
              vertical-align: middle;

              .dataAAStyle {
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                height: 25px;
                //line-height: 0.46667rem;
                margin: auto;
                width: 100%;
                span {
                  margin-left: 15px;
                }
              }
            }

            .dataBStyle {
              height: 20px;

              .dataBBStyle {
                margin-left: 15px;
                height: 100%;

                .dataImgStyle {
                  float: left;
                  height: 0px;
                  width: 0px;
                  text-align: center;
                }

                .dataBBTextStyle {
                  height: 20px;
                  line-height: 20px;

                  .span-text {
                    margin-left: 8px;
                  }
                }
              }

              .tagStyle {
                padding: 2px 4px;
                border-radius: 5px;
              }

              .tagLeft {
                color: blue !important;
              }

              .tagRight {
                color: orange !important;
              }
            }

            .dataTopStyle {
              margin-top: 7px;
            }

            .dataLeftStyle {
              margin-left: 38px;
            }
          }
        }

        .bottonMainStyle {
          height: 15%;

          div {
            margin-right: 10px;
          }
        }

        .imgMainStyle {
          float: right;
          width: 30%;
          height: 100%;
          position: relative;

          .aTextStyle {
            float: right;
            width: 50%;
            height: 100%;
            border-radius: 2px;
            padding: 3px 6px;
            color: green;
            background: #dbf7db;
          }


          .aImgStyleRed {
            float: right;
            width: 50%;
            height: 100%;
            border-radius: 2px;
            padding: 3px 6px;
            color: red;
            background: #f7dbe1;
          }

          .cImgStyleRed {
            right: 10%;
            top: 95%;
            float: right;
            width: 50%;
            height: 50;
            border-radius: 2px;
            padding: 3px 6px;
            color: white;
            background: #f7dbe1;
            position: absolute;
            text-align: center;
            background: linear-gradient(to bottom, #4eb5f1, #3892d3);
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
          }
        }
      }
    }

    .cardVanPullRefresh2 {
      height: 100%;

      .custom-image {
        height: 100%;
      }
    }
  }

  //右侧栏
  .rightBar {
    .mainPopupStyle {
      padding: 10px;
      margin-top: 30px;

      .typeStyle {
        font-size: 19px;
        font-weight: bold;
      }

      .typeStyleA {
        width: 5px;
        height: 27px;
        float: left;
        background-color: #0ca8add4;
      }

      .typeStyleB {
        margin-left: 10px;
        margin-top: 20px;
      }

      .checkstyle {
        width: 100%;

        .vanCheckboxGroupStyle {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .buttonStyle {
            .vanButtonStyle {
              background-color: #0ca8ad4f;
              border-radius: 5px;
              height: 35px;

              span {
                color: gray;
              }
            }

            .vanButtonStyleA {
              border-radius: 5px;
              border: 1px solid gray !important;
              height: 35px;

              span {
                color: gray;
              }
            }
          }
        }

        /deep/ .van-checkbox__icon {
          height: 100%;
        }

        /deep/ .van-cell__value {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .van-field__body {
            width: 100%;
          }
        }
      }
    }
  }

  .dialogMainStyle {
    .dialogSearchStyle {
      position: fixed;
      width: 100%;
    }

    .dialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }

  .bottom {
    position: absolute;
    bottom: 0px;
    width: 100%;
    display: flex;

    button {
      flex: 1;
      border-radius: 0px;
    }

    .van-button--info {
      background-color: #0ca8add4;
      border: 0.02667rem solid #0ca8add4;
    }

    .van-button--default {
      color: #1989fa;
    }
  }


  .moth {
    border: 3px solid orange;
  }

  /deep/ .van-dialog {
    height: 70%;
  }

  /deep/ .van-dialog__content {
    overflow-y: scroll;
    height: 85%;
  }
}
</style>
